<template>
  <el-dialog :model-value="visible" title="会议详情" @close="$emit('update:visible', false)">
    <div v-if="meeting">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="标题">
          <el-icon><Document /></el-icon> {{ meeting.title }}
        </el-descriptions-item>
        <el-descriptions-item label="时间">
          <el-icon><Calendar /></el-icon> {{ meeting.startTime }}
        </el-descriptions-item>
        <el-descriptions-item label="时长">
          <el-icon><Clock /></el-icon> {{ meeting.durationMinutes }} 分钟
        </el-descriptions-item>
        <el-descriptions-item label="详情">
          <el-icon><InfoFilled /></el-icon> {{ meeting.detail || '暂无详情' }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="meeting.status === 0 ? 'info' : meeting.status === 1 ? 'danger' : meeting.status === 2 ? 'success' : 'warning'">{{ meeting.statusDesc }}</el-tag>
        </el-descriptions-item>
        <!-- <el-descriptions-item label="参会人数">
          <span>
            <span v-if="meeting.participantCount !== undefined">{{ meeting.participantCount }}人</span>
            <span v-else-if="meeting.participants">共{{ meeting.participants.length }}人</span>
            <span v-else>0人</span>
          </span>
        </el-descriptions-item> -->
        <el-descriptions-item label="创建人">
          <el-icon><User /></el-icon> {{ meeting.name || '未知' }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <template #footer>
      <el-button @click="$emit('update:visible', false)">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { Document, Calendar, Clock, InfoFilled, User, Location } from '@element-plus/icons-vue'
defineProps({
  visible: Boolean,
  meeting: Object,
})
</script>

<style scoped>
.el-descriptions {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px;
}
</style>
